import React, { useState, useEffect } from 'react';
import { BookOpen, Play, Award, Trash2, Edit2, Check, X } from 'lucide-react';
import { Quiz } from '../../types';
import { Layout } from '../components/Layout';
import { ConfirmModal } from '../components/ConfirmModal';

interface ExamPreviewViewProps {
  quiz: Quiz;
  onStartExam: () => void;
  onBack: () => void;
  onViewResult: (e: React.MouseEvent, quiz: Quiz) => void;
  onDelete: (quiz: Quiz) => void;
  onUpdateQuiz: (quiz: Quiz) => void;
  onSettingsClick: () => void;
  onHomeClick: () => void;
  sidebarContent: React.ReactNode;
}

export const ExamPreviewView: React.FC<ExamPreviewViewProps> = ({
  quiz,
  onStartExam,
  onBack,
  onViewResult,
  onDelete,
  onUpdateQuiz,
  onSettingsClick,
  onHomeClick,
  sidebarContent
}) => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [editTitle, setEditTitle] = useState(quiz.title);

  useEffect(() => {
    setEditTitle(quiz.title);
  }, [quiz.title]);

  const handleSaveTitle = () => {
    if (editTitle.trim()) {
      onUpdateQuiz({ ...quiz, title: editTitle.trim() });
      setIsEditingTitle(false);
    }
  };

  const handleCancelEdit = () => {
    setEditTitle(quiz.title);
    setIsEditingTitle(false);
  };

  const handleDeleteClick = () => {
    setShowDeleteModal(true);
  };

  const handleConfirmDelete = () => {
    setShowDeleteModal(false);
    onDelete(quiz);
  };

  const handleCancelDelete = () => {
    setShowDeleteModal(false);
  };

  return (
    <Layout
      onSettingsClick={onSettingsClick}
      onHomeClick={onHomeClick}
      sidebarContent={sidebarContent}
    >
      <div className="flex flex-col items-center justify-center h-full p-8">
        <div className="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100">
          <div className="bg-primary/5 p-8 border-b border-primary/10 text-center relative">
            <button
              onClick={handleDeleteClick}
              className="absolute top-4 right-4 p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
              title="删除试卷"
            >
              <Trash2 className="w-5 h-5" />
            </button>
            <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-2xl shadow-sm mb-4 text-primary">
              <BookOpen className="w-8 h-8" />
            </div>
            {isEditingTitle ? (
              <div className="flex items-center justify-center gap-2 mb-2">
                <input
                  type="text"
                  value={editTitle}
                  onChange={(e) => setEditTitle(e.target.value)}
                  className="text-3xl font-bold text-slate-800 text-center bg-white border border-slate-300 rounded-lg px-2 py-1 focus:outline-none focus:border-primary w-full max-w-md"
                  autoFocus
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') handleSaveTitle();
                    if (e.key === 'Escape') handleCancelEdit();
                  }}
                />
                <button onClick={handleSaveTitle} className="p-1 text-green-600 hover:bg-green-50 rounded-full">
                  <Check className="w-6 h-6" />
                </button>
                <button onClick={handleCancelEdit} className="p-1 text-red-600 hover:bg-red-50 rounded-full">
                  <X className="w-6 h-6" />
                </button>
              </div>
            ) : (
              <div className="flex items-center justify-center gap-2 group">
                <h2 className="text-3xl font-bold text-slate-800">{quiz.title}</h2>
                <button
                  onClick={() => setIsEditingTitle(true)}
                  className="opacity-0 group-hover:opacity-100 transition-opacity p-1 text-slate-400 hover:text-primary"
                  title="修改标题"
                >
                  <Edit2 className="w-5 h-5" />
                </button>
              </div>
            )}
            <p className="text-slate-500 mt-2">{quiz.description}</p>
          </div>
          <div className="p-8 grid grid-cols-3 gap-4 text-center">
            <div className="p-4 bg-slate-50 rounded-xl">
              <div className="text-2xl font-bold text-slate-800">
                {quiz.questions.length}
              </div>
              <div className="text-xs font-medium text-slate-400 uppercase tracking-wider mt-1">
                题目数量
              </div>
            </div>
            <div className="p-4 bg-slate-50 rounded-xl">
              <div className="text-2xl font-bold text-slate-800">混合</div>
              <div className="text-xs font-medium text-slate-400 uppercase tracking-wider mt-1">
                题型
              </div>
            </div>
            <div className="p-4 bg-slate-50 rounded-xl">
              <div className="text-2xl font-bold text-slate-800">~10分</div>
              <div className="text-xs font-medium text-slate-400 uppercase tracking-wider mt-1">
                预计时长
              </div>
            </div>
          </div>
          <div className="p-8 pt-0 flex gap-4">
            <button
              onClick={onBack}
              className="flex-1 py-4 rounded-xl font-bold text-slate-600 hover:bg-slate-50 transition-colors"
            >
              返回
            </button>
            <button
              onClick={onStartExam}
              className="flex-[2] bg-primary hover:bg-indigo-700 text-white py-4 rounded-xl font-bold shadow-lg shadow-primary/30 transition-all flex items-center justify-center gap-2"
            >
              <Play className="w-5 h-5 fill-current" />
              开始考试
            </button>
          </div>

          {quiz.latestResult && (
            <div className="px-8 pb-8">
              <div className="bg-amber-50 border border-amber-100 rounded-xl p-4 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Award className="w-8 h-8 text-amber-500" />
                  <div>
                    <div className="text-sm font-bold text-amber-800">上次考试成绩</div>
                    <div className="text-xs text-amber-600">
                      {new Date(quiz.latestResult.timestamp).toLocaleString()}
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-2xl font-black text-amber-600">
                    {quiz.latestResult.score}分
                  </span>
                  <button
                    onClick={(e) => onViewResult(e, quiz)}
                    className="px-4 py-2 bg-white border border-amber-200 text-amber-700 text-sm font-bold rounded-lg hover:bg-amber-100 transition-colors"
                  >
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <ConfirmModal
        isOpen={showDeleteModal}
        title="删除试卷"
        message={`确定要删除试卷"${quiz.title}"吗？此操作无法撤销。`}
        onConfirm={handleConfirmDelete}
        onCancel={handleCancelDelete}
      />
    </Layout>
  );
};